<template>
  <div class="wrap wrap_order_list">
    <div class="mod_top_tabs_fixed">
      <div class="mod_top_tabs">
        <div class="item"></div>
        <div class="item"
            v-for="(item, index) in nav"
            :key="item.id"
            :class="{current: index === activeIndex}"
            @click="activeNav(index)"
        >{{item.title}}</div>
        <div class="item"></div>
      </div>
    </div>

    <div class="order_list">
      <div class="order_item"
          v-for="item in listData"
          :key="item.o_id">
        <a hover-class="none" :href="'/pages/order-detail/main?id=' + item.order_sn">
          <div class="item_status">
            <div class="date">下单时间：{{item._time}}</div>
            <div class="status" v-if="item.is_appointment != 1">{{item._sName}}</div>
          </div>
          <div class="figure">
            <img :src="item.order_img" alt="" class="pic" />
          </div>
          <div class="content">
            <div class="title">{{item.order_title}}</div>
            <div class="price" v-if="item.dis_amount && item.is_appointment != 1">
              <div class="original_price">&yen;{{item.ori_amount}}</div>
              <div class="real_price"> &yen;{{item.unit_amount}} x {{item.quantity}}</div>
            </div>
            <div class="checked_price" v-if="item.is_appointment != 1">合计：&yen;{{item.total_amount}}</div>
          </div>
        </a>
        <div class="action">
            <div class="btn_del">
              <div class="iconfont icon-zsdelete" @click="deleteOrder(item)"></div>
            </div>
            <a hover-class="none" v-if="item.is_appointment != 1" :href="'/pages/order-detail/main?id=' + item.order_sn" class="btn_em orange" :class="{none: item.status !== 10}">去支付</a>
        </div>
      </div>
    </div>

    <div class="pop_modal" :class="{none: !showDeletePop}" catchtouchmove="moveMask">
      <div class="pop_modal_inner">
        <div class="modal_title">删除订单后将无法查询，确定删除吗？</div>
        <div class="modal_btns">
          <div class="btn_normal" @click="closeDeletePop">取消</div>
          <div class="btn_em" @click="confirmDeletePop">确定</div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import fly from '@/utils/fly'
import { getOpenid } from '@/utils/login'
import { formatTime } from '@/utils/index'
import { STATUS_DICT } from '@/utils/order'
import { reportData } from '@/utils/report'

export default {
  data () {
    return {
      nav: [{
        id: 0,
        title: '全部'
      }, {
        id: 10,
        title: '待支付'
      }, {
        id: 20,
        title: '待使用'
      }],
      activeIndex: '',
      activeTypeId: '',
      listData: [],
      hasNext: true,
      canLoadMore: true,
      pageStart: 0,
      pageSize: 15,
      showDeletePop: false,
      deleteIndex: {}
    }
  },
  computed: {},
  methods: {
    async activeNav (i, flag) {
      // if (this.activeIndex === i ) {
      //   return
      // }
      this.activeIndex = i
      this.activeTypeId = this.nav[i].id
      this.listData = []
      this.pageStart = 0
      this.getList()
    },
    async getList () {
      this.canLoadMore = false
      let openid = await getOpenid()
      let url = `Order/list?is_appointment=0&wx_openid=${openid}&limit=${this.pageStart},${this.pageStart + this.pageSize}`
      if (this.activeTypeId !== 0) {
        url += `&status=${this.activeTypeId}`
      }
      let res = await fly.post(url)
      if (res && res.code === 200 && res.data) {
        res.data.list.forEach(item => {
          item._sName = STATUS_DICT['' + item.status]
          item._time = formatTime(new Date(item.create_time * 1000))
        })
        this.listData = this.listData.concat(res.data.list)
        this.pageStart += this.pageSize
        this.hasNext = res.data.page.totalcount > this.pageStart
      } else if (res && res.code === 404) {
        wx.showToast({
          title: `暂无数据`,
          icon: 'none'
        })
      } else {
        wx.showToast({
          title: `数据异常${res ? ('(' + res.code + ')') : ''}`,
          icon: 'none'
        })
      }
      this.canLoadMore = true
    },
    async deleteOrder (item) {
      this.showDeletePop = true
      this.deleteIndex = item
    },
    moveMask () {

    },
    closeDeletePop () {
      this.showDeletePop = false
    },
    async confirmDeletePop () {
      let item = this.deleteIndex
      let openid = await getOpenid()
      let url = `Order/del?wx_openid=${openid}&order_sn=${item.order_sn}`
      let res = await fly.post(url)
      if (res && res.code === 200) {
        this.listData.splice(this.listData.indexOf(item), 1)
      } else {
        wx.showToast({
          title: `删除异常${res ? ('(' + res.code + ')') : ''}`,
          icon: 'none'
        })
      }
      this.showDeletePop = false
    }
  },
  async onLoad () {
    reportData({
      funcx: '我的-我的订单',
      keyx: ''
    })

    wx.setNavigationBarTitle({
      title: '我的订单'
    })
  },
  onPullDownRefresh () {},
  onReachBottom () {
    if (this.hasNext && this.canLoadMore) {
      this.getList()
    }
  },
  onShow () {
    this.activeNav(0, true)
  }
}
</script>

<style lang="scss">
  @import './order-list.scss';
</style>
